import Icon from '@/components/Icon'
import { delChannel, addChannel } from '@/store/actions/home'
import { Toast } from 'antd-mobile'
import classNames from 'classnames'
import { useState } from 'react'
import { useDispatch } from 'react-redux'
import { useSelector } from 'react-redux'
// import differenceBy from 'lodash/differenceBy'
import styles from './index.module.scss'

/**
 * 频道管理组件
 * @param {Number} props.tabActiveIndex 用户选中的频道的索引
 * @param {Function} props.onClose 关闭频道管理抽屉时的回调函数
 * @param {Function} props.onChannelClick 当点击频道列表中的某个频道时的会带哦函数
 */
const Channels = ({ tabActiveIndex, onClose, onChange }) => {
  const tabs = useSelector((state) => state.home.userChannel)
  const comTabs = useSelector((state) => {
    const { userChannel, allChannel } = state.home
    return allChannel.filter((e) => {
      return userChannel.findIndex((item) => item.id === e.id) === -1
    })
    // return differenceBy(userChannel, allChannel, 'id')
  })
  const [editing, setEditing] = useState(false)
  const dispatch = useDispatch()

  // 频道选择高亮
  const onChangeClick = (e) => {
    // 如果是编辑状态不允许跳转
    if (editing) return
    onChange(e)
    onClose()
  }
  // 删除频道
  const delChannels = (channel, ind) => {
    if (tabs.length <= 4) {
      return Toast.info('至少保留4个频道', 1)
    }
    dispatch(delChannel(channel))

    // 删除的时候高亮处理
    if (ind === tabActiveIndex) {
      onChange(0)
    }
    if (ind < tabActiveIndex) {
      onChange(tabActiveIndex - 1)
    }
  }

  // 添加频道
  const add = (channel) => {
    dispatch(addChannel(channel))
    Toast.success('添加成功', 0.8)
  }

  return (
    <div className={styles.root}>
      {/* 顶部栏：带关闭按钮 */}
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" onClick={onClose} />
      </div>

      {/* 频道列表 */}
      <div className="channel-content">
        {/* 当前已选择的频道列表 */}
        <div
          className={classNames('channel-item', {
            edit: editing,
          })}
        >
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">
              点击{editing ? '删除' : '编辑'}频道
            </span>
            <span
              className="channel-item-edit"
              onClick={() => setEditing(!editing)}
            >
              {editing ? '完成' : '编辑'}
            </span>
          </div>

          <div className="channel-list">
            {tabs.map((item, ind) => (
              <span
                key={item.id}
                className={classNames('channel-list-item', {
                  selected: tabActiveIndex === ind,
                })}
                onClick={() => onChangeClick(ind)}
              >
                {item.name}
                <Icon
                  type="iconbtn_tag_close"
                  onClick={() => delChannels(item, ind)}
                />
              </span>
            ))}
          </div>
        </div>

        {/* 推荐的频道列表 */}
        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {comTabs.map((item) => (
              <span
                key={item.id}
                className="channel-list-item"
                onClick={() => add(item)}
              >
                + {item.name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
